<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <th:block th:include="common/head::head"></th:block>
    <style>
        .div-project {
            width: 100%;
            margin: 10px 0;
        }

        .div-project .layui-inline {
            width: calc(50% - 5px);
            margin-right: 0px;
        }
    </style>
</head>

<body>


<div class="layui-container div-project" id="div-project">

    <blockquote th:if="${item?.outGivingProject}" class="layui-elem-quote layui-quote-nm">
        节点分发项目请在节点分发管理页面中修改、删除
    </blockquote>

    <form action="saveProject" method="post" class="layui-form" id="form_project" lay-filter="form_project">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><span class="x-red">*</span>项目名称</label>
                <div class="layui-input-block">
                    <input th:readonly="${item?.outGivingProject}" type="text" name="name" placeholder="项目名称" required
                           lay-verify="required"
                           class="layui-input"
                           th:value="${item?.name}">
                    <input type="hidden" name="edit" th:value="${item!=null}?'on':''">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">分组名称</label>
                <div class="layui-input-block">
                    <select name="group" lay-filter="group" th:disabled="${item?.outGivingProject}">

                        <option th:each="i : ${groups}" th:value="${i}" th:selected="${item?.group==i}"
                                th:text="${i}"></option>
                        <option value="">选择手动添加</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><span class="x-red">*</span>项目ID</label>
                <div class="layui-input-block">
                    <input type="text" name="id" placeholder="程序运行标志（设置后将不能修改）" required lay-verify="required"
                           th:class="${item}?'layui-input layui-disabled':'layui-input'" th:value="${item?.id}"
                           th:readonly="${item?.outGivingProject}">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><span class="x-red">*</span>运行方式</label>
                <div class="layui-input-block">
                    <select name="runMode" lay-filter="runMode" th:disabled="${item?.outGivingProject}">

                        <option th:each="itemPath : ${runModes}" th:value="${itemPath}"
                                th:selected="${item?.runMode==itemPath}" th:text="${itemPath}">
                        </option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><span class="x-red">*</span>项目路径</label>
                <div class="layui-input-block">
                    <select name="whitelistDirectory"
                            th:disabled="${item?.outGivingProject}" required lay-verify="required"
                            lay-filter="projectLib">
                        <option th:unless="${#lists.isEmpty(whitelistDirectory)}" value="">请选择白名单</option>
                        <option th:each="itemPath : ${whitelistDirectory}" th:value="${itemPath}"
                                th:selected="${item?.whitelistDirectory==itemPath}" th:text="${itemPath}"></option>
                        <option value="" th:if="${#lists.isEmpty(whitelistDirectory)}">请添加白名单</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label" title="$!item.log"><span class="x-red">*</span>项目文件夹</label>
                <div class="layui-input-block">
                    <input th:readonly="${item?.outGivingProject}" type="text" name="lib"
                           placeholder="项目存储的文件夹，jar包存放的文件夹"
                           required
                           lay-verify="required"
                           class="layui-input" th:value="${item?.lib}">
                </div>
            </div>
            <div class="layui-form-mid layui-word-aux" style="padding: 0 !important;">
                <div class="layui-input-block x-red" th:style="${item!=null}?'display: none;':''" id="logInfoDiv">
                    <span id="projectStart">请选择</span>
                    <span id="projectEnd" style="margin-left: -4px">请填写</span>
                    <span th:if="${item}">&nbsp;&nbsp;日志路径：[[${item?.log}]]</span>
                </div>

                <script th:if="${item}" th:inline="javascript" type="text/javascript">
                    asyncFn.push(function () {
                        $("#projectEnd").text([[${item?.lib}]]);
                        $("#projectStart").text([[${item?.whitelistDirectory}]]);
                        if ([[${item?.runMode}]] === 'ClassPath') {
                            $("#mainClassDiv").show();
                        }
                        if ([[${item?.runMode}]] === 'JavaExtDirsCp') {
                            $("#mainClassDiv").show();
                            $("#javaExtDirsCp").show();
                        }
                        if ([[${item?.runMode}]] !== "File") {
                            $("#appInfoDiv").show();
                            $("#logInfoDiv").show();
                        }
                    });
                </script>
                <div class="layui-input-block" id="tipMsgDiv" style="color: red;min-height: 0px;display: none">
                    提示：<span id="tipMsg"></span>
                </div>
            </div>
        </div>
        <div class="layui-form-item" th:style="${item!=null}?'display: none;':''" id="mainClassDiv">
            <div class="layui-inline">
                <label class="layui-form-label">MainClass</label>
                <div class="layui-input-block">
                    <input th:readonly="${item?.outGivingProject}" type="text" name="mainClass"
                           placeholder="程序运行的 main 类(jar模式运行可以不填)" class="layui-input"
                           th:value="${item?.mainClass}">
                </div>
            </div>
            <div class="layui-inline" style="display: none;" id="javaExtDirsCp">
                <label class="layui-form-label">JavaExtDirsCp</label>
                <div class="layui-input-block">
                    <input th:readonly="${item?.outGivingProject}" type="text" name="javaExtDirsCp"
                           placeholder="-Dext.dirs=xxx: -cp xx  填写【xxx:xx】 " class="layui-input"
                           th:value="${item?.javaExtDirsCp}">
                </div>
            </div>
        </div>
        <div id="appInfoDiv" th:style="${item!=null}?'display: none;':''">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">Jvm参数</label>
                    <div class="layui-input-block">
                    <textarea th:readonly="${item?.outGivingProject}" name="jvm"
                              placeholder="jvm参数,非必填.如：-Xmin=512m -Xmax=512m"
                              class="layui-textarea" th:text="${item?.jvm}"></textarea>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">args参数</label>
                    <div class="layui-input-block">
                    <textarea th:readonly="${item?.outGivingProject}" name="args"
                              placeholder="Main函数args参数,非必填.如：--service.port=8080"
                              class="layui-textarea" th:text="${item?.args}"></textarea>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="padding-left: 30%"
                 id="appendCopyDiv">
                <input type="hidden" name="javaCopyIds">
                <a th:unless="${item?.outGivingProject}" class="layui-btn layui-btn-sm layui-btn-warm" id="appendCopy">添加副本
                </a>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">WebHooks</label>
                    <div class="layui-input-block">
                        <input th:readonly="${item?.outGivingProject}" type="text" name="token"
                               placeholder="关闭程序时自动请求,非必填，GET请求"
                               class="layui-input"
                               th:value="${item?.token}">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">JDK选择</label>
                    <div class="layui-input-block">
                        <select name="jdkId" lay-filter="jdkId" th:disabled="${item?.outGivingProject}">
                            <option value="" th:selected="#{item?.get('jdkId')==null}">请选择JDK</option>
                            <option th:each="itemJdk : ${jdkArray}" th:value="${itemJdk.id}"
                                    th:selected="${item?.get('jdkId')==itemJdk.id}"
                                    th:text="${itemJdk.name}">
                            </option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="layui-form-item" th:if="${item?.get('runCommand')}">
                <label class="layui-form-label">运行命令</label>
                <div class="layui-input-block">
                    <blockquote class="layui-elem-quote layui-quote-nm" th:text="${item?.runCommand}">
                    </blockquote>
                </div>
            </div>
        </div>

        <div class="layui-form-item"
             style="padding-left: 20%">
            <th:block th:unless="${item?.outGivingProject}">
                <button class="layui-btn layui-btn-normal" lay-submit
                        lay-filter="submitProject"
                        id="project_submit">提交
                </button>

                <a th:if="${item}" class="layui-btn layui-btn-warm" th:data-id="${item.id}" id="delete_project">删除</a>
            </th:block>

        </div>
    </form>
</div>
</body>
<script type="text/javascript">

    var laytpl;
    var copyIds = [];

    function loadSuccess() {
        var tipMsgDiv = ("#tipMsgDiv");
        // 提交项目表单
        form.on('submit(submitProject)', function (data) {
            var group = data.field.group;
            loadingAjax({
                url: data.form.action,
                data: data.field,
                success: function (data) {
                    layer.msg(data.msg);
                    if (200 === data.code) {
                        try {
                            var changeGroup = parent.window['changeGroup'];
                            changeGroup && changeGroup(group);
                        } catch (e) {
                        }
                        autoClose();
                    }
                }
            });
            return false;
        });
        var selectGroup = $("select[name='group']");
        form.on('select(group)', function (data) {
            if (data.value === "") {
                layer.prompt({
                    title: '输入分组名，并确认',
                    formType: 0
                }, function (text, index) {
                    layer.close(index);
                    var ext = $("select[name='group'] option[value='" + text + "']");
                    if (ext.length <= 0) {
                        selectGroup.find("option").first().before("<option value='" + text + "'>" + text + "</option>");
                    }
                    form.val("form_project", {
                        "group": text
                    });
                    form.render('select');
                });
            }
        });

        form.on('select(runMode)', function (data) {
            let val = data.value;
            if (val === "ClassPath" || val === "JavaExtDirsCp") {
                $("#mainClassDiv").show();
            } else {
                $("#mainClassDiv").hide();
            }
            if (val === "JavaExtDirsCp") {
                $("#javaExtDirsCp").show();
            } else {
                $("#javaExtDirsCp").hide();
            }
            if (val === "File") {
                $("#appInfoDiv").hide();
                $("#logInfoDiv").hide();
            } else {
                $("#appInfoDiv").show();
                $("#logInfoDiv").show();
            }
        });


        form.on('select(projectLib)', function (data) {
            let val = data.value;
            if (val === "") {
                val = "请选择";
                tipMsgDiv.hide();
                tipMsgDiv.attr("msg", "请填写项目路径")
            }
            $("#projectStart").text(val);
            if (val !== "") {
                checngeLib();
            }

        });
        $("input[name='lib']").change(function (e) {
            let val = $(this).val();
            if (val === "") {
                val = "请填写";
                tipMsgDiv.hide();
                tipMsgDiv.attr("msg", "请填写项目的jar路径")
            }
            $("#projectEnd").text(val);
            if (val !== "") {
                checngeLib();
            }
        });
        var whitelistDirectorySelect = $("select[name='whitelistDirectory']");

        function checngeLib() {
            var wVal = whitelistDirectorySelect.val();
            if (wVal === "") {
                layer.msg("请选择白名单");
                return;
            }
            var lib = wVal + $("#projectEnd").text();
            silentAjax({
                url: './judge_lib.json',
                data: {
                    id: "[[${item?.id}]]",
                    newLib: lib
                },
                success: function (data) {
                    if (200 === data.code) {
                        $("#tipMsgDiv").hide();
                    } else {
                        $("#tipMsg").text(data.msg).parent().show();
                    }
                }
            });
        }

        //
        $("#delete_project").click(function () {
            var id = $(this).attr("data-id");
            var type = $(this).attr("type");
            var msg;
            if ("all" === type) {
                msg = '确定彻底该删除项目 ' + id + ',删除将项目日志、lib都彻底删除？';
            } else {
                msg = '确定删除项目 ' + id + '？';
            }
            layer.confirm(msg, {
                title: '系统提示'
            }, function (index) {
                loadingAjax({
                    url: './deleteProject',
                    data: {
                        id: id,
                        type: type
                    },
                    success: function (data) {
                        layer.msg(data.msg);
                        if (200 === data.code) {
                            autoClose();
                        }
                    }
                });
            });
        });


        layui.use(['laytpl'], function () {
            laytpl = layui.laytpl;
            $("#appendCopy").click(function () {

                var id;
                while (true) {
                    id = randomString(2);
                    if ($("#copy_" + id).length <= 0) {
                        break;
                    }
                }
                addJavaCopy({id: id, del: true})
            });
        });

        $("body").delegate("a[del='copy']", "click", function () {
            // form.render();
            var parent = $(this).parent().parent();
            var attr = parent.attr("id");
            var id = attr.split("_")[1];
            copyIds.forEach(function (item, index, arr) {
                if (item === id) {
                    arr.splice(index, 1);
                }
            });
            parent.remove();
            $("input[name='javaCopyIds']").val(copyIds.join(","));
        });
    }


    function addJavaCopy(data) {
        var copyHtml = document.getElementById('copyTempl');
        laytpl(copyHtml.innerHTML).render(data, function (newHtml) {
            $("#appendCopyDiv").before(newHtml);
            copyIds.push(data.id);
            $("input[name='javaCopyIds']").val(copyIds.join(","));
        });
    }
</script>

<script type="text/html" id="copyTempl">
    <div class="layui-form-item" id="copy_{{d.id}}">
        <div class="layui-inline" style="width: 47%; float: left;">
            <label class="layui-form-label">副本:{{ d.id }}</label>
            <div class="layui-input-block">
                    <textarea name="jvm_{{d.id}}"
                              placeholder="jvm参数,非必填.如：-Xmin=512m -Xmax=512m"
                              class="layui-textarea">{{d.jvm || ''}}</textarea>
            </div>
        </div>
        <div class="layui-input-inline" style="width: 47%;">
            <label class="layui-form-label">副本:{{ d.id }}</label>
            <div class="layui-input-block">
                    <textarea name="args_{{d.id}}"
                              placeholder="Main函数args参数,非必填.如：--service.port=8080"
                              class="layui-textarea">{{ d.args || ''}}</textarea>
            </div>
        </div>
        {{# if(d.del){ }}
        <div class="layui-form-mid layui-word-aux" style="float: right;">
            <a class="layui-btn layui-btn-sm layui-btn-warm" del="copy">删除
            </a>
        </div>
        {{# } }}
    </div>
</script>

<script type="text/javascript" th:inline="javascript" th:if="${item?.get('javaCopyItemList')}">
    var javaCopyItemList = [[${item?.javaCopyItemList}]];

    asyncFn.push(function () {
        setTimeout(function () {
            javaCopyItemList.forEach(function (item, i) {
                item.del = false;
                addJavaCopy(item)
            })
        }, 500);
    });

</script>
</html>
